<docs>
  ## 简历内容
</docs>
<template>
  <div>
    <div class="header">
      <span class="arrow" @click="back_btn"></span>
      <h3 class="title">简历详情</h3>
    </div>
    <div class="resume">
      <!-- 基本信息 不可编辑-->
      <div class="r_item first_item">
        <!-- <div class="name" v-if="data.jlmc">{{data.jlmc}}</div> -->
        <!-- <div class="name" v-else @click="editResumeName(data.jlmc)">请填写简历名称</div> -->
        <div class="title">
          <input prop="jlmc" style="width:90%;" ref="Input"  maxlength="255" v-model="data.jlmc" placeholder="请填写简历名称"></input>
          <i class="iconfont icon-edit" @click=clickInput()></i>
        </div>
        <!-- <div class="content weui-cells weui-cells_form">
          <div class="item weui-cell weui-cell_switch">
            <div class="weui-cell__bd">是否公开电话</div>
            <div class="weui-cell__ft">
              <input
                type="checkbox"
                class="weui-switch"
                :true-value="'1'"
                :false-value="'0'"
                v-model="data.sfgkdh"
              />
            </div>
            <div class="weui-cell__bd margin_left">是否公开简历</div>
            <div class="weui-cell__ft">
              <input
                type="checkbox"
                class="weui-switch"
                :true-value="1"
                :false-value="0"
                v-model="data.sfgkjl"
              />
            </div>
          </div>
        </div>-->
      </div>
      <div class="r_item base">
        <div class="title">
          <h3>基本信息</h3>
          <i class="iconfont icon-edit" @click="editResumeItem('UserResumeBaseInfo')"></i>
        </div>
        <div class="content">
          <div class="item item_base">
            <p class="label">{{data.jbxx.xm}}</p>
            <p class="label">{{data.jbxx.xb_xs}}</p>
            <p class="label">{{data.jbxx.nl}}</p>
          </div>
          <div class="item">
            <p class="label">身份证号码</p>
            <p class="text">{{data.jbxx.sfzhm.substring(0, 14)}}****</p>
          </div>
          <div class="item">
            <p class="label">手机号码</p>
            <p class="text">{{data.jbxx.sj}}</p>
          </div>
          <!-- <div class="item" v-if="data.jbxx.gddh">
            <p class="label">固定电话</p>
            <p class="text">{{data.jbxx.gddh}}</p>
          </div> -->
        </div>
      </div>
      <!-- 工作经历 求职意向 职业技能  计算机 语言能力 可以编辑 -->
      <!-- conf-item 为页面渲染选项配置引用自conf配置文件，data[item.datakey]为真实页面数据 -->
      <div
        :class="`r_item ${item.className}`"
        v-for="(item, index) in conf"
        :key="index.toString()+'2'"
      >
        <div class="title">
          <h3>{{item.title}}</h3>
          <i class="iconfont icon-edit" @click="editResumeItem(item.linkName)"></i>
        </div>
        <div class="content weui-cells weui-cells_checkbox max_height">
          <div v-if="item.dataKey == 'xxjl'">
            <label
              class="weui-cell weui-check__label"
              :for="`${item.dataKey + n}`"
              v-for="(list, n) in data[item.dataKey]"
              :key="n.toString()+'3'"
            >
              <div class="weui-cell__ft">
                <input
                  type="checkbox"
                  class="weui-check"
                  :value="list[item.showListId]"
                  v-model="checkeds"
                  @change="redme(item.showListId,list[item.showListId])"
                  name="checkbox"
                  :id="`${item.dataKey + n}`"
                  checked="checked"
                />
                <span class="weui-icon-checked"></span>
              </div>
              <div class="weui-cell_bd">
                <div class="item" v-for="(mark, mi) in item.showList" :key="mi.toString()+'4'">
                  <p class="label">{{mark.label}}</p>
                  <p class="text">{{list[mark.key]}}</p>
                </div>
              </div>
              <!-- <i class="iconfont icon-delete" v-if="item.selectType !== '2'"
              @click.stop="deleteResumeItem(item.dataKey,item.showListId, list[item.showListId])"></i>-->
            </label>
            <label
              class="weui-cell weui-check__label"
              :for="`${'zyjn' + n}`"
              v-for="(list, n) in data.zyjn"
              :key="n.toString()+'5'"
            >
              <div class="weui-cell__ft">
                <input
                  type="checkbox"
                  class="weui-check"
                  :value="list[item.grjnidId]"
                  v-model="checkeds"
                  @change="redme(item.grjnidId,list[item.grjnidId])"
                  name="checkbox"
                  :id="`${'zyjn' + n}`"
                  checked="checked"
                />
                <span class="weui-icon-checked"></span>
              </div>
              <div class="weui-cell_bd">
                <div class="item" v-for="(mark, ni) in item.zyjnshowList" :key="ni.toString()+'6'">
                  <p class="label">{{mark.label}}</p>
                  <p class="text">{{list[mark.key]}}</p>
                </div>
              </div>
            </label>
            <label
              class="weui-cell weui-check__label"
              :for="`${'yy' + n}`"
              v-for="(list, n) in data.yy"
              :key="n.toString()+'7'"
            >
              <div class="weui-cell__ft">
                <input
                  type="checkbox"
                  class="weui-check"
                  :value="list[item.grjnidId]"
                  v-model="checkeds"
                  @change="redme(item.grjnidId,list[item.grjnidId])"
                  name="checkbox"
                  :id="`${'yy' + n}`"
                  checked="checked"
                />
                <span class="weui-icon-checked"></span>
              </div>
              <div class="weui-cell_bd">
                <div class="item" v-for="(mark, i) in item.yyshowList" v-show="list[mark.key]" :key="i.toString()+'8'">
                  <p class="label">{{mark.label}}</p>
                  <p class="text">{{list[mark.key]}}</p>
                </div>
              </div>
            </label>
          </div>
          <div v-else>
            <label
              class="weui-cell weui-check__label"
              :for="`${item.dataKey + n}`"
              v-for="(list, n) in data[item.dataKey]"
              :key="n.toString()+'9'"
            >
              <div class="weui-cell__ft">
                <input
                  type="checkbox"
                  class="weui-check"
                  :value="list[item.showListId]"
                  v-model="checkeds"
                  @change="redme(item.showListId,list[item.showListId])"
                  name="checkbox"
                  :id="`${item.dataKey + n}`"
                />
                <span class="weui-icon-checked"></span>
              </div>
              <div class="weui-cell_bd">
                <div class="item" v-for="(mark, m) in item.showList" :key="m.toString()+'1'">
                  <p class="label">{{mark.label}}</p>
                  <p class="text">{{list[mark.key]}}</p>
                </div>
              </div>
              <!-- <i class="iconfont icon-delete" v-if="item.selectType !== '2'"
              @click.stop="deleteResumeItem(item.dataKey,item.showListId, list[item.showListId])"></i>-->
            </label>
          </div>
        </div>
      </div>
      <!-- 简历设置 -->
      <div class="r_item setting">
        <div class="title">
          <h3>简历设置</h3>
        </div>
        <div class="weui-cells weui-cells_form">
          <div class="item weui-cell weui-cell_switch">
            <div class="weui-cell__bd">是否公开电话</div>
            <div class="weui-cell__ft">
              <input
                type="checkbox"
                class="weui-switch"
                :true-value="'1'"
                :false-value="'0'"
                v-model="data.sfgkdh"
              />
            </div>
          </div>
          <div class="weui-cell weui-cell_switch">
            <div class="weui-cell__ft">
              <input
                type="checkbox"
                class="weui-switch"
                :true-value="1"
                :false-value="0"
                v-model="data.sfgkjl"
              />
            </div>
            <div class="weui-cell__bd">是否公开简历</div>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="btn-wrap">
        <button class="weui-btn weui-btn_primary" @click.prevent="saveResume" type="button">保存</button>
      </div>
    </div>
  </div>
</template>
<script>
import coForm from "base/form/form";
import coInput from "base/form/input";
import { validator } from "common/js/valid";
import { SFGKDH, SFGKJL } from "common/js/conf";
import store from "@/store/index";
import { conf, other } from "../resume/showContent";

export default {
  name: "userResume",
  components: { coInput },
  data() {
    return {
      conf,
      other,
      jlid: "",
      grqzid: "",
      objs: {
        qzyxids: [],
        gzjlids: [],
        xxjlids: [],
        grjnids: []
      },
      data: {
        jlmc: "",
        ids: [],
        jbxx: {
          xm: "",
          nl: "",
          xb_xs: "",
          sfzhm: "",
          sj: ""
        },
        gzjl: [],
        xxjl: [],
        qzyx: [],
        zyjn: [],
        yy: [],
        jsj: [],
        qtsx: {
          sftk: ""
        },
        sfgkdh: "",
        sfgkjl: ""
      },
      list: [],
      checkeds: [],
      options: {
        title: "",
        dataKey: "",
        selectType: ""
      },
      redmeFlag: "",
      doType: "",
      rules: {
        jlmc: validator('64,"normal","简历名称",false')
      }
    };
  },
  methods: {
    clickInput(){
      this.$refs.Input.focus();
    },
    //点击复选框选择数据
    redme(val, n) {
      val = val + "s";
      const _indexs = this.objs[val].indexOf(n);
      if (this.objs[val].length > 0) {
        if (this.objs[val].indexOf(n) == "-1") {
          this.objs[val].push(n);
        } else {
          this.objs[val].splice(_indexs, 1);
        }
      } else {
        this.objs[val].push(n);
      }
    },
    /* 保存 */
    saveResume() {
      const { data, jlid, grqzid, doType, objs } = this;
      // 简历名称
      if (!data.jlmc) {
        this.$alert("简历名称不能为空，请添加简历名称");
        return;
      }
      // 求职意向
      if (objs.qzyxids.length < 1) {
        this.$alert("您至少需要选择一条求职意向");
        return;
      }
      const postData = {
        jlid,
        grqzid,
        jlmc: data.jlmc,
        qzyxids: objs.qzyxids,
        gzjlids: objs.gzjlids,
        xxjlids: objs.xxjlids,
        grjnids: objs.grjnids,
        ywcz: doType,
        sfgkdh: data.sfgkdh,
        sfgkjl: data.sfgkjl
      };
      this.$confirm("确定保存？", "提示")
        .then(() => {
          this.$loading = true;
          this.$http
            .post("/grgl/jlsxBc", postData)
            .then(res => {
              const resData = res.returnData;
              this.$alert(resData.message, () => {
                if (+resData.executeResult === 1) {
                  if (this.sftd) {
                    this.$router.go(-1);
                  } else {
                    this.$router.push({ name: "personUser" });
                  }
                }
              });
            })
            .finally(() => {
              this.$loading = false;
            });
        })
        .catch(() => {
          this.$toast("选择了取消");
        });
    },
    /* 初始化页面数据 */
    initPageData({ type, jlid, grqzid }) {
      this.GET_content({ type, jlid, grqzid }).then(res => {
        const resData = res.returnData.jlxx;
        Object.keys(this.data).forEach(item => {
          this.data[item] = resData[item];
        });
        this.data.jlmc = this.data.jlmc?this.data.jlmc:`${this.data.jbxx.xm}的简历`
        Object.keys(this.objs).forEach(key => {
          this.objs[key] = resData[key];
        });
        this.checkeds = this.data.ids;
        this.jlid = resData.jlid;
        if (this.jlid) {
          this.doType = "2";
        } else {
          this.doType = "1";
          // 默认公开手机和简历都为是
          this.data.sfgkdh = '1';
          this.data.sfgkjl = '1';
        }
      });
    },
    /* 异步获取内容 */
    GET_content({ type, jlid, grqzid }) {
      this.$loading = true;
      return this.$http
        .get("/grgl/jlxqCx", {
          params: {
            cxlx: type,
            jlid,
            grqzid
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    /* 编辑简历项 */
    editResumeItem(item) {
      // 求职信息
      if(store.state.userInfo.sfyqzdj =='0' && item != 'UserResumeBaseInfo' && item!='UserResumejobIntent'){
        this.$alert("请填写求职意向");
        return
      }
      store.commit("SET_FORJUMP_GO", true);
      this.$router.push({ name: item });
    },
    // 按钮点击
    back_btn() {
      this.$router.push({ name: "personUser" });
    }
  },
  created() {
    const { jlid, grqzid, sftd } = this.$route.query;
    this.sftd = sftd; //简历弹框跳转
    /* 无id表明是新增, 有表示修改 */
    if (!jlid || !grqzid) {
      // 无 新增
      this.initPageData({ type: 1 });
      // this.doType = "1";
    } else {
      this.initPageData({ type: "1", jlid, grqzid });
      // this.doType = "2";
    }
    this.jlid = jlid;
    this.grqzid = grqzid;
    // 隐藏home按钮
    this.$store.commit("SET_VISIBLE_ALL", false);
  },
  // 跳转上一个页面  判断是否返回我的 禁止循环跳转
  /* eslint-disable consistent-return */
  beforeRouteLeave(to, from, next) {
    this.$nextTick(_ => {
      if (
        (to.name == "UserResumeBaseInfo" ||
          to.name == "UserResumeschoolExper" ||
          to.name == "UserResumeeditWorkHistory" ||
          to.name == "UserResumejobIntent") &&
        !store.state.forjump
      ) {
        next({ name: "personUser" });
      } else {
        store.commit("SET_FORJUMP_GO", false);
        next();
      }
    });
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.resume {
  padding: $padding-base;
  .r_item {
    background-color: #fff;
    padding: $radius-base4;
    border-radius: $margin-left;
    font-size: $margin-left;
    margin-bottom: $margin-base;
    /* 简历名称 */
    &.resume_name {
      background-color: transparent;
      .title {
        border-bottom: none;
        line-height: 1.5;
        font-size: $font-size-larges;
        text-align: center;
        color: $color-text-title;
        // word-wrap: break-word;
        word-break: break-all;
      }
    }
    /* 基本信息 */
    &.base {
      .content .item .label {
        color: $color-text-primary;
        min-width: 0;
      }
    }
    /* 内容块标题 */
    .title {
      font-size: $font-size-large;
      position: relative;
      display: flex;
      color: #fff;
      h3 {
        font-size: $font-size-base;
        font-weight: normal;
        flex: 1;
        padding: $padding-base;
        text-align: center;
        background: url("~common/images/center.png") center no-repeat;
        background-size: $width-box * 2;
      }
      .iconfont {
        color: #0096ff;
        position: absolute;
        right: 0;
        padding: $padding-base;
        font-size: inherit;
        flex: 0 0 auto;
      }
    }
    /* 内容 */
    .content {
      font-size: $font-size-base;
      line-height: 1.5;
      /* 多个列表 */
      .list {
        border-bottom: 1px dotted $color-border;
        position: relative;
        .icon-delete {
          position: absolute;
          right: 0;
          top: 0;
          padding: $padding-base;
          font-size: $font-size-large;
          color: $color-error;
        }
        & .item:nth-child(2) {
          .text {
            padding-right: $padding-base * 4;
          }
        }
      }
      & .list:last-child {
        border-bottom: none;
      }
      /* 内容项 */
      .item {
        display: flex;
        padding: $padding-base;
        .label {
          flex: 0 0 auto;
          color: $color-text-label;
          padding-right: $padding-base;
          min-width: 120px;
          text-align-last: justify;
        }
        .text {
          flex: 1;
          color: $color-text-primary;
          word-break: break-all;
        }
        .weui-cell__bd {
          font-size: $margin-left * 2;
        }
        .margin_left {
          margin-left: $font-size-larges * 2;
        }
      }
      .weui-cell_switch {
        padding: 0;
      }
    }
    .weui-cells:after,
    .weui-cells:before {
      content: none;
    }
  }
  .setting {
    .weui-cells {
      margin-top: -1px;
    }
  }
  .btn-wrap {
    display: flex;
    .weui-btn {
      margin: $margin-base auto;
      flex: 0 1 60%;
    }
  }
  .iconfont:active {
    background-color: $color-touch-avtive;
  }
  .first_item .name {
    font-size: $font-size-large;
    font-weight: 500;
    color: #333;
  }
}
/* 过渡动画 */
.slide-enter-active,
.slide-leave-active {
  transition: all ease-in-out 0.45;
}
.slide-enter,
.slide-leave-to {
  opacity: 0;
  transform: translate3d(0, 25px, 0);
}
.icon-delete {
  position: absolute;
  right: $padding-base;
  color: red;
  z-index: 100;
}
</style>
